<template>
  <div class="header">
    <div class="address_map" @click="$router.history.push('/address')">
      <i class="iconfont iconicon-dibiao">&#xe624;</i>
      <span>{{$store.state.position.formattedAddress}}</span>
      <i class="iconfont iconsanjiaojiantou1">&#xe649;</i>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {
    if (!localStorage.formattedAddress) {
      this.$store.commit("changeAddress", "定位中……");
      const _this = this;
      AMap.plugin("AMap.Geolocation", function() {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000
        });

        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", onComplete);
        AMap.event.addListener(geolocation, "error", onError);

        function onComplete(data) {
          // data是具体的定位信息
          // console.log(data);
          _this.$store.commit("changeAddress", data.formattedAddress);
        }

        function onError(data) {
          // 定位出错
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.header,
.search_wrap {
  background-color: #009eef;
  padding: 10px 16px;
}

.header .address_map {
  color: #fff;
  font-weight: bold;
}

.address_map i {
  margin: 0 3px;
  font-size: 18px;
}

.address_map span {
  display: inline-block;
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>